<template>
  <div class="edit">
    <el-form label-width="0">
      <el-form-item prop="claName">
        <el-input v-model="tableData.itemName" placeholder="请输入安检名称" />
        <el-select v-model="tableData.itemType" @change="onChange">
          <el-option label="单选" :value="1" />
          <el-option label="多选" :value="3" />
          <el-option label="展示" :value="5" />
          <el-option label="照片" :value="-1" />
        </el-select>
        <el-select v-model="tableData.checkTypeId" placeholder="请选择分类" @change="onClassificationChange">
          <el-option v-for="(item,index) in checkTypeList" :key="index" :label="item.checkTypeName" :value="item.checkTypeId" />
        </el-select>
        <el-checkbox v-if="show" :checked="tableData.isShow === 1" @change="changeShow">统计展示</el-checkbox>
        <el-checkbox v-if="show" :checked="tableData.intentionType === 2" @change="changeIntentionType">是否有意向</el-checkbox>
      </el-form-item>
    </el-form>
    <div class="edit-table">
      <div v-if="tableData.itemType === -1">
        <el-radio v-model="tableData.detailList[0].isChecked" label="必传">{{ tableData.detailList[0].itemDetailName }}</el-radio>
        <el-radio v-model="tableData.detailList[0].isChecked" label="非必传">{{ tableData.detailList[1].itemDetailName }}</el-radio>
        <span>提示文字：</span><el-input v-model="tableData.detailList[1].tips" style="display: inline-block; width: 210px;" placeholder="请输入" />
      </div>
      <el-table
        v-if="tableData.itemType !== -1 && show"
        ref="lbTable"
        border
        element-loading-text="加载中"
        :data="tableData.detailList"
      >
        <el-table-column prop="itemDetailName" label="选项文字">
          <template slot-scope="scope">
            <el-input v-model="scope.row.itemDetailName" placeholder="请输入" @keyup="row.itemDetailName = row.itemDetailName.replace(/\s+/g, '')" />
          </template>
        </el-table-column>
        <el-table-column prop="" label="默认">
          <template slot-scope="scope">
            <div>
              <el-checkbox v-if="scope.row.itemType === 3" :checked="scope.row.isChecked===2" @change="(value)=>changeBox(value, scope.$index)" />
              <el-radio v-if="scope.row.itemType === 1" v-model="scope.row.isChecked" :label="2" :checked="scope.row.isChecked===2" @change="(value)=>checkChange(value, scope.$index)">{{ '' }}</el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="ico">
              <i class="el-icon-top" @click="onTop(scope.row, scope.$index)" />
              <i class="el-icon-bottom" @click="onBottom(scope.row, scope.$index)" />
              <i class="el-icon-circle-plus-outline" @click="copyAdd(scope.row)" />
              <i class="el-icon-remove-outline" @click="iconDel(scope.row)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="csmName" label="是否拍照取证">
          <template slot-scope="scope">
            <div>
              <el-checkbox :checked="scope.row.isUploadPic===2" @change="(value)=>uploadPicChange(value, scope.$index)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="即查即改">
          <template slot-scope="scope">
            <div>
              <el-radio v-if="scope.row.itemType === 1" v-model="scope.row.modificationType" :label="2" :checked="scope.row.modificationType===2" @change="(value)=>cationTypeChange(value, scope.$index)">{{ '' }}</el-radio>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-button @click.stop="saveEdit">完成编辑</el-button>
        <el-button @click.stop="cancel">取消编辑</el-button>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'edittable',
    props: {
      checkTypeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        show: false,
        isAdd: '', // 是否新增
        isBtnEdit: false, // 是否编辑
        tableData: {
          detailList: []
        }
      }
    },
    computed: {
      column: function() {
        return [
          {
            prop: 'itemDetailName',
            label: '选项文字',
            render: (h, { row, $index }) => {
              return (
                (
                  <el-input v-model={ row.itemDetailName } placeholder={ '请输入' } onKeyup={ row.itemDetailName = row.itemDetailName.replace(/\s+/g, '')}> </el-input>
                  // <el-input v-model={ row.itemDetailName } placeholder={ '请输入' }> </el-input>
                )
              )
            }
          },
          {
            prop: 'csmName',
            label: '默认',
            render: (h, { row, $index }) => {
              return (
                <div>
                { row.itemType === 1 && <el-radio></el-radio>}
                { row.itemType === 3 && <el-checkbox></el-checkbox>}
                </div>
              )
            }
          },
          {
            prop: 'csmName',
            label: '操作',
            render: (h, { row, $index }) => {
              return (
                <div class='ico'>
                  <i class='el-icon-top' onClick={() => this.onTop(row, $index)}></i>
                  <i class='el-icon-bottom' onClick={() => this.onBottom(row, $index)}></i>
                  <i class='el-icon-circle-plus-outline' onClick={() => this.copyAdd(row)}></i>
                  <i class='el-icon-remove-outline' onClick={() => this.iconDel(row)}></i>
                </div>
              )
            }
          }
        ]
      }
    },
    async created() {

    },
    methods: {
      open(val, isNewCrad, treeVal) {
        this.isAdd = isNewCrad // 是否新增
        this.tableData = val
        console.log(this.tableData.intentionType)
        if (this.tableData && this.tableData.detailList && this.tableData.detailList.length === 1) {
          this.tableData.detailList[0].isChecked = 2
        }
        this.show = true
        const i = this.checkTypeList.find(item => item.checkTypeId === this.tableData.checkTypeId)
        if (!i) {
          this.tableData.checkTypeId = ''
        }
        // this.tableData.itemType = 1
        // this.onChange(this.tableData.itemType)
      },

      onChange(val) {
        const flag = this.tableData.detailList.every(item => item.itemType === val)
        if (!flag) {
          this.tableData.detailList.map(item => item.itemType = val)
          this.tableData.detailList = [this.deepClone(this.tableData.detailList[0])]
          this.tableData.detailList[0].itemDetailName = ''
          this.tableData.detailList[0].isChecked = 2
          this.$set(this.tableData.detailList[0], 'tips', '')
          if (this.tableData.itemType === -1) {
            this.tableData.detailList.push({})
            this.$set(this.tableData.detailList[0], 'itemDetailName', '必传')
            this.$set(this.tableData.detailList[1], 'itemDetailName', '非必传')
            this.$set(this.tableData.detailList[0], 'isChecked', '必传')
            this.$set(this.tableData.detailList[1], 'isChecked', '必传')
          }
          this.isAdd = true
          // 是否编辑
          this.isBtnEdit = true
        }
      },
      onClassificationChange() {
        const name = this.checkTypeList.find(item => item.checkTypeId === this.tableData.checkTypeId)
        this.$set(this.tableData, 'checkTypeName', name.checkTypeName)
      },
      checkForm() {
        const flag = this.tableData.detailList.every(item => item.itemDetailName !== '') || this.tableData.itemType === -1
        const err = []
        if (!(flag && this.tableData.itemName)) err.push(flag ? '请输入安检名称' : '请输入安检项名称')
        if (!this.tableData.checkTypeId) err.push('请选择分类')
        if (err.length > 0) {
          this.$message.warning(err[0])
        } else {
          return true
        }
      },
      // 完成编辑
      saveEdit() {
        if (this.checkForm()) {
          this.$emit('saveEdit', { data: this.tableData })
        }
      },
      // 取消编辑
      cancel() {
        if (this.isAdd) {
          this.$confirm('取消编辑会清除数据,是否取消编辑?', '操作提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            this.$emit('cancelEdit', this.tableData, this.isBtnEdit)
          })
        } else {
          this.$emit('cancelEdit')
        }
      },
      // 增加
      copyAdd() {
        var id = 1
        this.tableData.detailList.push({
          itemDetailId: 0,
          itemDetailName: '',
          itemId: 0,
          itemName: '',
          isChecked: 1,
          itemType: this.tableData.itemType,
          modificationType: 1,
          orderNo: 1
        })
        this.tableData.detailList.map(item => {
          item.orderNo = id++
        })
      },
      // 删除
      iconDel(val) {
        this.$confirm('删除会清除数据，是否删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (!(this.tableData.detailList.length > 1)) {
            this.$message.warning('至少需要保留一条安检子项')
            return
          }
          this.tableData.detailList = this.tableData.detailList.filter(item => {
            return item.orderNo !== val.orderNo
          })
          var id = 1
          this.tableData.detailList.map(item => {
            item.orderNo = id++
          })
          if (this.tableData.detailList.length === 1) {
            this.tableData.detailList[0].isChecked = 2
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 上
      onTop(val, index) {
        if (index !== 0) {
          const topData = this.tableData.detailList[index - 1 ] // 获取上一条数据
          this.tableData.detailList[index] = topData // 把上一条数据替换为当前数据
          this.tableData.detailList[index - 1] = val // 把当前数据赋值为上一个数据
          this.tableData.detailList = [...this.tableData.detailList] // 从新复制数据
        }
      },
      // 下
      onBottom(val, index) {
        if (index !== this.tableData.detailList.length - 1) {
          const topData = this.tableData.detailList[index + 1 ]
          this.tableData.detailList[index] = topData
          this.tableData.detailList[index + 1] = val
          this.tableData.detailList = [...this.tableData.detailList]
        }
      },
      // 深拷贝
      deepClone(target) {
        var result
        if (typeof target === 'object') {
          if (Array.isArray(target)) {
            result = []
            for (const i in target) {
              result.push(this.deepClone(target[i]))
            }
          } else if (target === null) {
            result = null
          } else if (target.constructor === RegExp) {
            result = target
          } else {
            result = {}
            for (const i in target) {
              result[i] = this.deepClone(target[i])
            }
          }
        } else {
          result = target
        }
        return result
      },
      checkChange(value, index) {
        this.tableData.detailList.forEach((item, index2) => {
          if (index !== index2) {
            item.isChecked = 1
          } else {
            item.isChecked = 2
          }
        })
      },
      changeBox(value, index) {
        this.tableData.detailList.forEach((item, index2) => {
          if (index === index2) {
            item.isChecked = value ? 2 : 1
          }
        })
      },
      uploadPicChange(value, index) {
        if (value) {
          this.tableData.detailList[index].isUploadPic = 2
        } else {
          this.tableData.detailList[index].isUploadPic = 1
        }
      },
      cationTypeChange(value, index) {
        this.tableData.detailList.forEach((item, index2) => {
          if (index !== index2) {
            this.tableData.detailList[index2].modificationType = 1
          } else {
            this.tableData.detailList[index2].modificationType = 2
          }
        })
      },
      changeShow(value) {
        if (value) {
          this.$set(this.tableData, 'isShow', 1)
        } else {
          this.$set(this.tableData, 'isShow', 0)
        }
      },
      changeIntentionType(value) {
        console.log('1111111')
        if (value) {
          this.$set(this.tableData, 'intentionType', 2)
        } else {
          this.$set(this.tableData, 'intentionType', 1)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.edit {
  .edit-table {
    /deep/.ico {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font-size: 24px;
      i {
        font-weight: 900;
        color: #989fc1;
      }
      i:nth-child(4) {
        color: #f84768;
      }
    }
    .footer {
      display: flex;
      padding-top: 10px;
      flex-direction: row-reverse;
      .el-button {
        margin-left: 10px;
      }
    }
  }
  /deep/.el-form-item__content {
    display: flex;
    .el-input {
      width: 222px;
      margin-right: 20px;
    }
  }
}
</style>
